<template>
<!-- @click="click" -->
    <div class="product-discount" >
        <!-- <div v-if="showTitle" class="product-discount__tip text-small after-line">
            合伙人、返利会员、员工推荐亲友团专享优惠
        </div>
        <div class="product-discount__detail">
            <div v-if="fullReductionDiscount.length" class="product-discount__detail-list after-line">
                <div class="product-discount__detail-item" v-for="(item, index) in fullReductionDiscount" :key="index">
                    <div class="product-discount__detail-item-label text-small">满减</div>
                    <div class="product-discount__detail-item-name text-normal">{{item.title}}</div>
                    <- <div v-if="item.total_abatement" class="product-discount__detail-item-price">￥{{item.total_abatement | currency}}</div> ->
                </div>
            </div>
            <div v-if="discountDiscount.length" class="product-discount__detail-list after">
                <div class="product-discount__detail-item" v-for="(item, index) in discountDiscount" :key="index">
                    <div class="product-discount__detail-item-label text-small">折扣</div>
                    <div class="product-discount__detail-item-name text-normal">{{item.title}}</div>
                    <div v-if="item.total_abatement" class="product-discount__detail-item-price">￥{{item.total_abatement | currency}}</div>
                </div>
            </div>
            <div class="product-discount__detail-list">
                <template v-for="(item, index) in discount.gift">
                    
                    <div v-for="(item, i) in item.content" :key="'gift_content_' + index + '_' + i" class="product-discount__detail-item" @click="onClickGift(item)">
                        <div class="product-discount__detail-item-label text-small">赠送</div>
                        <div class="product-discount__detail-item-name text-normal">{{item.name}}</div>
                        <div class="product-discount__detail-item-price">￥{{item.price | currency}}x{{item.number}}</div>
                    </div>
                </template>
            </div>
        </div> -->
        <!-- 新增优惠弹窗 -->
        <div class="discountBox" style="padding: 8px 0rpx 0rpx 0px;" @click="openSpec">
            <!-- <div class="serviceBox_tit">活动</div> -->
                <div class="serviceBox_con" style="width:100%;">
                    <div v-if="showTitle" class="product-discount__tip text-small after-line" style="border:none;margin-bottom: 10rpx;">
                        合伙人、返利会员、员工推荐亲友团专享优惠
                    </div>
                    <div class="pkg-discount__detail" style="padding-left:30rpx;" @click="openSpec">
                        <div class="pkg-discount__detail-list">
                            <template v-for="(item, index) in fullReductionDiscount">
                                <div :key="'gift_header_' + index" class="pkg-discount__detail-item detailItem" v-if="index < 1" style="margin-bottom：0rpx;border:none;">
                                    <div class="discount_give text-small detailLabel" style="line-height:36rpx;">满减</div>
                                    <div class="pkg-discount__detail-item-name text-normal" style="border-bottom: 1rpx dashed #ddd;font-size:24rpx;">{{item.title}}</div>
                                    <span class="icon" style="font-size: 38rpx;color: #999;">&#xe770;</span>
                                </div>
                            </template>
                        </div>
                        <!-- <div v-if="fullReductionDiscount.length" class="pkg-discount__detail-list detailList" style="margin-bottom：20rpx;display:flex;">
                            <template v-for="(item, index) in fullReductionDiscount">
                                <div class="pkg-discount__detail-item" :key="index" v-if="index < 1" style="margin-bottom：0rpx;">
                                    <div class="discount_give text-small detailLabel" style="margin-right:15rpx;margin-right: 7px;border: none;line-height: 40rpx;color: #000;">满减</div>
                                    <div class="pkg-discount__detail-item-name text-normal">{{item.title}}</div>
                                </div>
                            </template>
                        </div> -->
                        
                        <!-- <div class="pkg-discount__detail-list" v-if="discountDiscount">
                            <template v-for="(item, i) in discountDiscount">
                                <div :key="'gift_content_'+ '_' + i" v-if="i < 1" class="pkg-discount__detail-item detailItem" style="margin-bottom：20rpx;">
                                    <div class="discount_give text-small detailLabel" style="margin-right:15rpx;">折扣</div>
                                    <div class="pkg-discount__detail-item-name text-normal">{{item.title}}</div>
                                    <- <div class="pkg-discount__detail-item-price" v-if="item.total_abatement">￥{{item.total_abatement | currency}}</div> ->
                                    <span class="icon" style="font-size: 38rpx;color: #999;">&#xe770;</span>
                                </div>
                            </template>
                        </div> -->
                        <div class="pkg-discount__detail-list">
                            <template v-for="(item, index) in discountDiscount">
                                <div :key="'gift_header_' + index" class="pkg-discount__detail-item detailItem" v-if="index < 1" style="margin-bottom：0rpx;border:none;">
                                    <div class="discount_give text-small detailLabel" style="line-height:36rpx;">折扣</div>
                                    <div class="pkg-discount__detail-item-name text-normal" style="border-bottom: 1rpx dashed #ddd;font-size:24rpx;display: flex;justify-content: space-between;flex-wrap: nowrap;">
                                        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right: 10rpx;">{{item.title}}</span>
                                        <span class="pkg-discount__detail-item-price" v-if="item.total_abatement">￥{{item.total_abatement | currency}}</span>
                                    </div>
                                    <span class="icon" style="font-size: 38rpx;color: #999;">&#xe770;</span>
                                </div>
                            </template>
                        </div>
                        <div class="pkg-discount__detail-list">
                            <template v-for="(item, index) in discount.gift">
                                <div :key="'gift_header_' + index" class="pkg-discount__detail-item detailItem" style="margin-bottom：0rpx;border:none;">
                                    <div class="discount_give text-small detailLabel" style="line-height:36rpx;">赠送</div>
                                    <div class="pkg-discount__detail-item-name text-normal" style="border-bottom: 1rpx dashed #ddd;font-size:24rpx;">{{item.title}}</div>
                                    <span class="icon" style="font-size: 38rpx;color: #999;">&#xe770;</span>
                                </div>
                                <!-- <div @click.stop="onClickGift(item)" v-for="(item, i) in item.content" :key="'gift_content_' + index + '_' + i" class="pkg-discount__detail-item detailItem"  style="margin-bottom：20rpx;">
                                    <div class="discount_give text-small detailLabel" style="margin-right:15rpx;">赠送</div>
                                    <div class="pkg-discount__detail-item-name text-normal">{{item.name}}</div>
                                    <div class="pkg-discount__detail-item-price">￥{{item.price | currency}}x{{item.number}}</div>
                                    <span class="icon" style="font-size: 38rpx;color: #999;">&#xe770;</span>
                                </div> -->

                            </template>
                        </div>
                    </div>
                </div>
        </div>
        <!-- 规格弹窗 -->
        <ShopSpecPopupNew v-if="specVisibleNew"
            :product-detail="fullReductionDiscount"
            :discount-detail="discount"
            :discount-discount="discountDiscount"
            :spec-id="selectSpecId"
            :count-visible="true"
            @close="onCloseSpecPopup"
            @toSpecDetail="onClickGift">
        </ShopSpecPopupNew>

    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import store from '@/store';
import { api } from '@/lib/api';
import { ROUTE_NAME } from '@/lib/constant';

import ShopSpecPopupNew from '@/features/good/shopSpecPopupNew.vue';

@Component({
    name: 'ProductDiscount',
    components:{
        ShopSpecPopupNew
    }
})
export default class ProductDiscount extends Vue {
    @Prop({ type: Boolean, default: true }) public showTitle!: boolean;
    @Prop({ type: Number }) public productId?: number;
    @Prop({}) public price?: any;

    // 弹窗
    public specVisibleNew: any = false;


// 弹出优惠窗口
    public openSpec(){
        this.specVisibleNew = true;
    }
    public onCloseSpecPopup (){
        this.specVisibleNew = false;
    }

    /** 优惠信息 */
    public get discount() {
        return store.state.good.discount[this.productId] || {
            full_reduction: [],
            discount: [],
            gift: [],
            balance: [],
        };
    }
    public get fullReductionDiscount() {
        return (this.discount.full_reduction || []).map((item) => {
            return {
                ...item,
                total_abatement: this.getFullReductionDiscountPrice(item),
            };
        });
    }
    public get discountDiscount() {
        return (this.discount.discount || []).map((item) => {
            return {
                ...item,
                total_abatement: this.getDiscountDiscountPrice(item),
            };
        });
    }

    public getFullReductionDiscountPrice(item: Product.FullReductionDiscount) {
        const price = this.price;
        if (!price) {
            return;
        }
        console.log('FullReduction:',price,item)
        const minPrice = price.min;
        if (minPrice >= item.limit) {
            return minPrice - item.abatement * Math.floor(minPrice / item.limit);
        }
    }
    public getDiscountDiscountPrice(item: Product.DiscountDiscount) {
        const price = this.price;
        if (!price) {
            return;
        }
        console.log('Discount:',price,item)
        const minPrice = price.min;
        if (minPrice >= item.limit) {
            return (minPrice / item.limit) * item.ratio;
        }
    }
    public onClickGift(gift: Product.GiftDiscountContent) {
        api.push({
            name: ROUTE_NAME.PRODUCT_DETAIL,
            params: {
                productId: gift.id + '',
            },
        });
    }
}
</script>

<style lang="less">
@import "../../../lib/style/mixins.less";

.product-discount {
    .discountBox{
        display: flex;
        .serviceBox_tit{
            width: 90rpx;
            height: 80rpx;
            line-height: 70rpx;
            font-size: 28rpx;
        }
        .serviceBox_con{
            width: 87%;
            font-size: 28rpx;
        }
    }

    &__detail {
        padding: 10px 40rpx 0;
        &-list {
            flex: 1;
            position: relative;
            overflow: hidden;
        }
        &-item {
            display: flex;
            align-items: flex-start;
            padding: 0 0;
            margin-bottom: 5px;
            overflow: hidden;
            &-label {
                padding: 0 5px;
                margin-right: 10px;
                color: #F75A16;
                background: #F9DED2;
                white-space: nowrap;
            }
            &-name {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &-price {
                .text-normal();
            }
        }
    }
    &__tip {
        position: relative;
        padding: 10rpx 40rpx;
        border-top: 1rpx solid #ddd;
        color: #918F8F;
    }
    .discount_give{
        padding: 2rpx 20rpx 2rpx 15rpx;
        display: inline-block;
        margin-right:15rpx;
        border: none;
        line-height: 40rpx;
        color: #000;
        font-size:28rpx;
    }
}
</style>
